<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>统一下单</title>
    <link rel="stylesheet" href="https://unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.1/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
    <script src="https://unpkg.com/layui@2.6.8/dist/layui.js"></script>
</head>
<body>
<div id="dpLTE">
<div class="layui-bg-gray layui-form" style="padding: 20px;">
	<form>
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md6">
				<div class="layui-panel">
					<div style="padding: 15px;">
						<div class="layui-form-item">
							<label class="layui-form-label">商品名称</label>
							<div class="layui-input-block">
								<input type="text" name="title" lay-verify="title" v-model="orderProduct.body" autocomplete="off" placeholder="请输入商品名称" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">商品单价</label>
							<div class="layui-input-block">
								<input type="number" oninput="if(value>10||value<0)value=10" lay-verify="required" lay-reqtext="商品单价是必填项，岂能为空？" autocomplete="off" v-model="orderProduct.price" placeholder="请输入商品单价" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">购买数量</label>
							<div class="layui-input-block">
								<input @input="onInputChange($event)" lay-verify="required" lay-reqtext="购买数量是必填项，岂能为空？" autocomplete="off" v-model="orderProduct.amount" placeholder="请输入购买数量" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">付款总额</label>
							<div class="layui-input-block">
								<input readonly type="text" lay-verify="required" lay-reqtext="付款总额是必填项，岂能为空？" autocomplete="off" v-model="orderProduct.totalFee" placeholder="0.0" class="layui-input layui-bg-gray">
							</div>
						</div>
						<div class="layui-form-item" style="margin-top: 45px;padding-left: 25px;">
							<button onclick="vm.unifiedOrder()" type="submit" class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="submitUnifiedOrder">立即下单</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>
</div>
</body>
<script>

layui.use(['form'], function(){
	var form = layui.form;
	//自定义验证规则
	form.verify({
		title: function(value){
			if(value.length < 5){
				return '商品名称至少得5个字符啊';
			}
		}
	});
	//监听提交
	form.on('submit(submitUnifiedOrder)', function(data){
		console.log(JSON.stringify(data));
		return false;
	});
});
var vm = new Vue({
	el:'#dpLTE',
	data: {
		orderProduct: {
			body: '',
			price: '',
			amount: '',
			totalFee: ''
		}
	},
	methods : {
		// 规格组输入框change事件
		onInputChange(e) {
			let that = this;
			if (e.target.value>10)
			{
				that.orderProduct.amount = 10;
			}
			let totalFee = that.orderProduct.amount*that.orderProduct.price;
			that.orderProduct.totalFee = totalFee;

		   console.log(e.target.value)
		   console.log(JSON.stringify(that.orderProduct));
		},
		dialogClose : function() {
			var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
			parent.layer.close(index); //再执行关闭
		},
		//统一下单
		unifiedOrder: function() {
			let that=this;
			axios.post('/pay/unifiedOrder', JSON.stringify(this.orderProduct), {headers: {'Content-Type': 'application/json'}})
				.then(function (res) {
					console.log(res);
					if (res.data.code==0){
						that.dialogClose();
						parent.location.reload();// 刷新父页面
					}else {
						layer.msg(res.data.msg, {
							time: 2000
						});
					}
				})
				.catch(function (e) {
					console.log(e);
				});
		}
	}
})
</script>
</html>